<template>
  <div class="container">
    <div class="header">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="银行高管姓名">
          <el-input v-model="form.name" placeholder="请输入高管名称"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.position" placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btns">
        <div>
          <el-button class="btn" @click="addInfo">新增</el-button>
          <el-button class="btn">导出</el-button>
        </div>
        <div>
          <el-button class="btn">查询</el-button>
          <el-button class="btn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="银行高管姓名" align="center">
        </el-table-column>
        <el-table-column prop="position" label="职位" align="center">
        </el-table-column>
        <el-table-column prop="gender" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center">
        </el-table-column>
        <el-table-column prop="birth" label="出生日期" align="center">
        </el-table-column>
        <el-table-column
          prop="tenure"
          label="任职期间"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="shareholding" label="持有股份" align="center">
        </el-table-column>
        <el-table-column prop="salary" label="是否领取薪酬" align="center">
        </el-table-column>
        <el-table-column
          prop="partTimeName"
          label="兼职单位的名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="partTimePost"
          label="兼职单位的职务"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="holdingName"
          label="任职股东单位名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="holdingPost"
          label="在股东单位的职务"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="individual"
          label="个人简介"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="dialogFormVisible = true"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination>
    </div>
    <div class="addForm">
      <el-dialog title="高管信息" :visible.sync="dialogFormVisible">
        <el-form :model="addForm" label-width="140px">
          <el-form-item label="名称">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="addForm.position" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="addForm.gender" placeholder="请选择性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="addForm.birth"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任职期间">
            <el-date-picker
              v-model="addForm.tenure"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="持有股份">
            <el-input
              v-model="addForm.shareholding"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否领取薪酬">
            <el-select v-model="addForm.salary" placeholder="请选择">
              <el-option label="是" value="0"></el-option>
              <el-option label="否" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="兼职单位的名称">
            <el-input
              v-model="addForm.partTimeName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="兼职单位的职务">
            <el-input
              v-model="addForm.partTimePost"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="任职股东单位名称">
            <el-input
              v-model="addForm.holdingName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="在股东单位的职务">
            <el-input
              v-model="addForm.holdingPost"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input
              v-model="addForm.individual"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button
            class="btn"
            type="primary"
            @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        position: '',
        gender: '',
      },
      total: 0,
      tableData: [
        {
          index: '1',
          name: '田国立',
          position: '董事长,执行董事',
          gender: '男',
          age: '63',
          birth: '1960-12-20',
          tenure: '2017-10-09 至 -',
          shareholding: '-',
          salary: '是',
          partTimeName: '',
          partTimePost: '',
          holdingName: '',
          holdingPost: '',
          individual: '',
        },
        {
          index: '2',
          name: '张金良',
          position: '副董事长,董事,行长',
          gender: '男',
          age: '54',
          birth: '1969-11-17',
          tenure: '2022-04-29 至 -',
          shareholding: '-',
          salary: '是',
          partTimeName: '',
          partTimePost: '',
          holdingName: '',
          holdingPost: '',
          individual: '',
        },
        {
          index: '3',
          name: '纪志宏',
          position: '执行董事,副行长',
          gender: '男',
          age: '55',
          birth: '1968-4-11',
          tenure: '2019-08-15 至 -',
          shareholding: '-',
          salary: '是',
          partTimeName: '',
          partTimePost: '',
          holdingName: '',
          holdingPost: '',
          individual: '',
        },
      ],
      dialogFormVisible: false,
      addForm: {
        name: '',
        position: '',
        gender: '',
        age: '',
        birth: '',
        tenure: '',
        shareholding: '',
        salary: '',
        partTimeName: '',
        partTimePost: '',
        holdingName: '',
        holdingPost: '',
        individual: '',
      },
    };
  },
  methods: {
    addInfo() {
      this.dialogFormVisible = true;
    },
    pageFn() {
      //
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 0 16px;
  height: calc(100vh - 160px);
  overflow: scroll;
}
.header {
  padding: 10px;
}
.btns {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
::v-deep {
  .header {
    .el-form {
      display: flex;
    }
  }
  .addForm {
    .el-form
      .el-form-item
      .el-form-item__content
      .el-input__inner.el-input__inner {
      width: 300px;
    }
  }
  .el-table {
    min-height: 440px;
  }
  .el-table th.el-table__cell {
    background-color: #1c2238;
    color: #fff;
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
